<template>
  <div class="list_wrap">
    <div class="speech_item">
      <div class="speech_title">
        <div class="left">
          <view class="iconfont iconshijianzhou"/>
          <h2>{{currentStage.name}}</h2>
        </div>
        <span @click="editSpeech(currentStage.id)">编辑</span>
      </div>

      <div class="steps" v-if="!$util.isEmpty(currentStage.fast_list)">
        <uni-steps :data="currentStage.fast_list" activeIcon inActiveIcon direction="column" active-color="#FF6900" activeTxtColor="#333" contentKey="content" :clickable="true" :active="currentStage.activeStep" @click="chooseCurrent">
          <template v-slot:activeIcon="{item}">
              <div class="active_icon"></div>
          </template>
          <template v-slot:inActive="{item}">
              <div class="inactive_icon"></div>
          </template>
        </uni-steps>
      </div>
    </div>
    <template v-if="otherStageList">
      <h3>其它阶段</h3>
    <div class="speech_item" v-for="(item,index) in otherStageList" :key="item.id">
      <div class="speech_title">
        <div class="left">
          <view class="iconfont iconshijianzhou"/>
          <h2>{{item.name}}</h2>
        </div>
        <span @click="editSpeech(item.id)">编辑</span>
      </div>

      <div class="steps" v-if="!$util.isEmpty(item.fast_list)">
        <uni-steps :data="item.fast_list" activeIcon inActiveIcon direction="column" active-color="#FF6900" activeTxtColor="#333" contentKey="content" :clickable="true" :active="item.activeStep" :index="index" @click="chooseOther">
          <template v-slot:activeIcon="{item}">
              <div class="active_icon"/>
          </template>
          <template v-slot:inActive="{item}">
              <div class="inactive_icon"/>
          </template>
        </uni-steps>
      </div>

    </div>
    </template>
    <div class="confirm_btn" @click="postSpeech">
      确定
    </div>
  </div>
</template>

<script>
import uniSteps from '@/components/uni-steps/uni-steps/uni-steps'
import { getTemplateSpeechList } from '@/api/constructionSite'
export default {
	name: 'templateSpeech',
	components: {
		uniSteps
	},
	data() {
		return {
			currentStage: {},
			otherStageList: [],
			option: {},
			chooseSpeech: ''
		}
	},
	onLoad(option) {
		this.option = option
	},
	onShow() {
		this.getList()
	},
	methods: {
		getList() {
			const params = {
				stage_group_id: this.option.current_stage_group_id,
				current_stage_id: this.option.stage_id || this.option.current_stage_id
			}
			getTemplateSpeechList(params).then(res => {
				const stage_list = res.data.stage_list || []
				if (stage_list.length) {
					this.currentStage = stage_list.find(item => item.id == res.data.current_stage_id) || {}
					this.currentStage.activeStep = ''
					this.otherStageList = stage_list.filter(item => item.id != res.data.current_stage_id).map(item => ({
						...item,
						activeStep: ''
					}))
				}
			})
		},
		chooseCurrent({ title, stepIndex }) {
			// console.log(stepIndex, 'stepIndex')
			this.currentStage = { ...this.currentStage, 'activeStep': stepIndex + '' }
			this.otherStageList = this.otherStageList.map(item => ({
				...item,
				activeStep: ''
			}))
			this.chooseSpeech = title
		},
		chooseOther({ title, index, stepIndex }) {
			// console.log(stepIndex, 'stepIndex')
			this.chooseSpeech = title
			this.otherStageList = this.otherStageList.map(item => ({
				...item,
				activeStep: ''
			}))
			this.currentStage = { ...this.currentStage, 'activeStep': '' }
			this.$set(this.otherStageList, index, { ...this.otherStageList[index], activeStep: stepIndex + '' })
		},
		postSpeech() {
			if (!this.chooseSpeech) {
				uni.showToast({
					title: '请选择模板话术',
					icon: 'none'
				})
				return
			}
			let pages = getCurrentPages()// 获取页面栈
			let prevPage = pages[pages.length - 2]// 上一个页面
			if (prevPage) {
				prevPage.$vm.form.content = this.chooseSpeech
				uni.navigateBack()
			}
			// const params = {
			// 	...this.option,
			// 	speech: this.chooseSpeech
			// }
			// uni.navigateTo({
			// 	url: `/pages/constructionSite/update${this.commonJS.queryData(params)}`
			// })
		},
		editSpeech(id) {
			uni.navigateTo({
				url: `/pages/constructionSite/editTemplateSpeech?ts_id=${id}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
.list_wrap {
    padding: 20px 30px 100px;
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #f5f5f5;
    .speech_item {
        border-radius:20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding: 0 20px 0 24px;
        .speech_title {
            display: flex;
            font-size:28px;
            justify-content: space-between;
            height:90px;
            line-height: 90px;
            .left {
                display: flex;
                align-items: center;
                .iconshijianzhou {
                    font-size: 30px;
                    color: #FF6900;
                }
                h2 {
                    font-size: 28px;
                    font-weight:600;
                    color:rgba(51,51,51,1);
                    margin-left: 11px;
                }
            }
            span {
                color:rgba(255,105,0,1);
            }
        }
        .steps {
            border-top: 1px solid rgba(238,238,238,1);
            .active_icon {
                width:22px;
                height:22px;
                background:rgba(255,255,255,1);
                border: 1px solid #FF6900;
                border-radius:50%;
                position: relative;
                &::before {
                    content: '';
                    width:14px;
                    height:14px;
                    background:rgba(255,105,0,1);
                    border-radius:50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate3d(-50%,-50%,0);
                    // margin: -7px 0 0 -7px;
                }
            }
            .inactive_icon {
                width:22px;
                height:22px;
                background:rgba(255,255,255,1);
                border: 1px solid #FF6900;
                border-radius:50%;
            }
        }
    }
    h3 {
        padding: 47px 0 20px;
        font-size:28px;
        font-weight:400;
        color:rgba(153,153,153,1);
    }
    .confirm_btn {
        height:100px;
        line-height: 100px;
        text-align: center;
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        background:rgba(255,209,26,1);
        box-shadow:0px -3px 10px 0px rgba(0, 0, 0, 0.1);
        font-size:32px;
        color:rgba(58,27,4,1);
        z-index: 999;
    }
}

</style>
